<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成某组号某域名的robots.txt和sitemap.xml内容</title>
    <link href="/static/css/bootstrap3.4.1.min.css" rel="stylesheet">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/FileSaver.min.js"></script>
    <link rel="shortcut icon" href="/static/groupcheck.ico"/>
</head>
<body>
<div class="container text-center" id="app">
    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="alert">
        <strong>友情提示！</strong> 提交内容不能为空
    </div>

    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="error_msg!=''">
        <strong>提交失败！</strong> {{ error_msg }}
    </div>

    <!--提交成功的提示-->
    <div class="alert alert-success" role="alert" v-if="show && error_msg==''">
        <strong>提交成功！</strong> 你可以查看下面的表格，有每个域名的最终结果
    </div>

    <div id="result" v-if="show">
        <h2>执行结果</h2>
        <div class="row" v-if="content_robots">
            <div class="col-md-12">
                <h3>
                    <span class="label label-primary">域名:{{host}}</span>
                    <span class="label label-info">执行时间:{{exectime}}秒</span>
                </h3>
            </div>
        </div>

        <h3 v-if="content_robots">
            Robots.txt内容&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="label label-warning glyphicon glyphicon-copy" aria-hidden="true" style="cursor:pointer" @click.prevent="copyRobotsTxt()">复制robots.txt</span>&nbsp;
        </h3>
        <div style="white-space: pre-line;text-align: left;overflow-y:scroll;max-height: 300px;" v-if="content_robots">
            <code> {{ content_robots }}</code>
        </div>

        <!--<h3 v-if="content_sitemap">
            Sitemap.xml内容&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="label label-warning glyphicon glyphicon-copy" aria-hidden="true" style="cursor:pointer" @click.prevent="copySitemapContent()">复制sitemap.xml</span>&nbsp;
        </h3>
        <div style="white-space: pre-wrap;text-align: left;overflow-y:scroll;max-height: 300px;" v-if="content_sitemap">
            <code> {{ content_sitemap }}</code>
        </div>-->
    </div>

    <h3 class="text-center text-warning">{{ topic }}</h3>

    <form class="form-horizontal">
        <div class="form-group">
            <input type="text" style="display:none!important" value="<?php echo $url; ?>" ref='requrl'>
            <textarea class="form-control" rows="10" id="domains" name="domains" v-model="domains"
                      placeholder="https://baidu.com
https://baidu.com/csv.php
或者
baidu.com
baidu.com/csv.php">{{ domains }}</textarea>
        </div>
        <div class="form-group row">
            <div class="col-lg-6">
                <button type="button" class="btn btn-default btn-lg" @click.prevent="reset()">重置</button>
            </div>
            <div class="col-lg-6">
                <button type="button" class="btn btn-primary btn-lg" @click.prevent="commit()" v-bind:disabled="btn_disabled?false:true">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            topic: '生成某组号某域名的Robots和Sitemap内容',
            domains: '',
            show: false,
            btn_disabled: true,
            alert: false,
            content_robots: '',
            host: '',
            exectime: '',
            error_msg: '',
            error_domains: '',
            other_domains: '',
        },
        methods: {
            copyRobotsTxt() {
                if (this.content_robots == '') {
                    alert('Robots内容生成失败，无法复制');
                    return false;
                }
                var oInput = document.createElement("textarea");
                oInput.value = this.content_robots;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = "oInput";
                oInput.style.display = "none";
                alert("复制成功");
            },
            copySitemapContent(content) {
                var oInput = document.createElement("textarea");
                oInput.value = content;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = "oInput";
                oInput.style.display = "none";
                alert("复制成功");
            },
            reset() {
                this.domains = '';
                this.show = false;
                this.btn_disabled = true;
                this.alert = false;
            },
            commit() {
                // 请求url
                let url = this.$refs.requrl.value;
                this.btn_disabled = false;
                this.alert = false;
                if (this.domains != '') {
                    this.show = false;
                    this.error_msg = '';
                    axios.post(url, {domains: this.domains}).then((response) => {
                        this.show = true;
                        if (response.data.code == 200) {
                            this.content_robots = response.data.result.robots_content;
                            this.exectime = response.data.result.exectime;
                            this.host = response.data.result.host;
                            this.error_msg = '';
                            this.domains = '';
                        } else {
                            this.content_robots ='';
                            this.exectime ='';
                            this.host ='';
                            this.error_msg = response.data.result;
                        }
                        this.btn_disabled = true;
                    });
                } else {
                    this.alert = true;
                    this.btn_disabled = true;
                }
            }
        }
    });
</script>